import React from 'react';
import { Modal } from 'ywen-mobile-ui';
import BaseComponent from './baseComponent.js';


class YouyuAlert extends BaseComponent {
  constructor(props) {
    super(props);
    this.show = this.show.bind(this);
    this.close = this.close.bind(this);
    this.state = {
      show: false,
    };
  }

  show({
    title = '提示',
    text, btns = [],
    subText = null,
  }) {
    this.setState({
      show: true,
      title,
      text,
      btns,
      subText,
    });
  }

  close() {
    this.setState({ show: false });
  }

  render() {
    const {
      show,
      text,
      btns,
      subText,
    } = this.state;
    if (!show) {
      return null;
    }

    const btnCells = btns.map((btn, index) => {
      return (
        <div key={index} onClick={btn.action} className={`action-btn ${btn.active ? 'active' : ''}`}>
          {btn.title}
        </div>
      );
    });

    const textList = text.split('\n');
    const textCells = [];
    for (let index = 0; index < textList.length; index += 1) {
      const element = textList[index];
      textCells.push(<span key={`text-${index}`}>{element}</span>);
      if (index !== textList.length - 1) {
        textCells.push(<br key={`br-${index}`} />);
      }
    }

    if (subText) {
      textCells.push(<br key="br-sub-text" />);
      textCells.push(<span key="text-sub-text" className="sub-text">{subText}</span>);
    }

    return (
      <Modal className="alert-pingan">
        <div className="dialog">
          <p className="text">{textCells}</p>
          <div className="btn-view">
            {btnCells}
          </div>
        </div>
      </Modal>
    );
  }
}

export default YouyuAlert;
